<template>
  <!-- 环节列表 -->
  <div class="steps" v-loading="loading">
    <el-empty description="暂无内容" v-if="form.ccCourseContentList.length == 0&&!loading" class="empty"></el-empty>
    <el-tabs v-model="stepIndex" v-else>
      <el-tab-pane
        v-for="(item, index) in form.ccCourseContentList"
        :key="index"
        :name="index + ''"
      >
        <el-empty description="暂无内容"
                  v-if="!item.description && (!item.ccCourseContentFileList || item.ccCourseContentFileList.length == 0)" class="empty"
        ></el-empty>
        <template v-slot:label>
              <span
                :class="{
                  work_type:
                    item.contentType == 1 ||
                    item.contentType == 3 ||
                    !item.contentType,
                  things_type: item.contentType == 2,
                }"
              >{{
                  item.contentName ? item.contentName : `内容${index + 1}`
                }}</span
              >
        </template>
        <div
          class="content"
          v-html="item.description"
        ></div>
        <div
          class="fileTitle"
          v-if="
                item.ccCourseContentFileList &&
                item.ccCourseContentFileList.length > 0
              "
        >
          教学课件:
        </div>
        <div class="flex files" v-if="item.ccCourseContentFileList">
          <div
            class="flex files_file shou"
            @click="openfile(item1.fileUrl, item1.fileName, item1.type)"
            v-for="(item1, index1) in item.ccCourseContentFileList"
            :key="index1"
          >
            <img
              :src="returnIcon(item1.fileUrl, item1.type)"
              alt="加载失败"
              class="icon"
            />
            <div class="overTxt filename">{{ item1.fileName }}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <fileDrawer
      :show.sync="drawer"
      :url="drawerurl"
      :name="drawername"
      :type="drawertype"
      :isHttps="isHttps"
    ></fileDrawer>
  </div>
</template>
<script>
import { getCourseIndexDetial } from '@/api/course/course'
import { returnIcon } from '@/utils/util'

export default {
  name: 'courseTeachDetail',
  data() {
    return {
      //教学内容选中的下标
      stepIndex: '0',
      form: {
        description: '',
        ccCourseContentList: []
      },
      // 文件组件弹框
      isHttps: false,
      drawer: false,
      loading: false,
      drawerurl: '',
      drawername: '',
      drawertype: '',
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      }

    }
  },
  props: {
    selectedContentId: [String, Number],
    courseId: [String, Number]
  },
  watch: {
    stepIndex() {
      //在当前页面把选中的下标保存
      const videos = document.querySelectorAll('video')
      if (videos && videos.length > 0) {
        videos.forEach((video) => {
          video.pause()
        })
      }
    },
    selectedContentId: {
      handler(newValue) {
        if (!newValue) {
          return
        }
        this.reset()
        this.stepIndex = '0'
        this.getInfo()
      },
      immediate: true
    }
  },
  methods: {
    //获取内容层信息
    async getInfo() {
      this.loading = true
      let res = await getCourseIndexDetial(this.selectedContentId)
      const { code, data } = res
      if (code == 200) {
        this.form = data
        //把当前选中的教学内容下标存起来，方便后续保存旧组件数据时使用
        this.form.lastStepIndex = this.stepIndex

        let arr = []
        if (data.ccCourseContentList && data.ccCourseContentList.length > 0) {
          for (const courseContentItem of data.ccCourseContentList) {
            let obj = {
              ...courseContentItem,
              showEdit: false
            }
            arr.push(obj)
          }
        }
        this.form.ccCourseContentList = arr
        this.loading = false
      }
    },
    // 打开文件
    openfile(url, name, type) {
      let uploadType = url
        .slice(url.lastIndexOf('.'), url.length)
        .toLowerCase()
      let arr = [
        '.gif',
        '.png',
        '.jpeg',
        '.jpg',
        '.mp4',
        '.webm',
        '.pdf',
        '.wps',
        '.docx',
        '.doc',
        '.rtf',
        '.pptx',
        '.ppt',
        '.xls',
        '.xlsx',
        '.wps',
        '.ofd',
        '.txt',
        '.js',
        '.json',
        '.css',
        '.sql',
        '.xml',
        '.java',
        '.cs(c#)'
      ]
      if (type == '1') {
        this.isHttps = false
        if (arr.indexOf(uploadType) > -1) {
          this.drawer = true
          this.drawerurl = url
          this.drawername = name
          this.drawertype = type
        } else {
          window.open(url, '_blank')
        }
      } else {
        this.drawer = true
        this.isHttps = true
        this.drawerurl = url
        this.drawername = name
        this.drawertype = type
      }
    },

    // 初始化组件数据
    reset() {
      this.form = {
        description: '',
        ccCourseContentList: []
      }
    }
  }
}

</script>
<style scoped lang="scss">
.steps {
  margin-top: 24px;
  height: 100vh;
  // ::v-deep .el-tabs__nav-wrap {
  //   padding-left: 24px !important;
  // }

  .content {
    margin-top: 28px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .fileTitle {
    margin-top: 40px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }

  .files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 24px; // 行间距和列间距
    justify-content: space-between;
    margin-top: 24px;
    .files_file {
      .icon {
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }

      .filename {
        width: 149px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
      }
    }
  }

  //内容  样式start>>>>>>>>>>>>>>>>>>>>>
  ::v-deep .el-tabs__item.is-top.is-closable {
    padding: 0 !important;
    border-radius: 8px 8px 0 0;
    position: relative !important;
    border: 0;
    margin-right: 4px;

    .el-icon-close {
      position: absolute !important;
      top: 5px !important;
      right: 5px !important;
    }

    &:hover {
      .work_type + .el-icon-close {
        color: #4e8dff !important;

        &:hover {
          background: #ccdeff !important;
        }
      }

      .things_type + .el-icon-close {
        color: #28b28b !important;

        &:hover {
          background: #aef3df !important;
        }
      }
    }
  }

  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 0;
  }

  .work_type {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #e4edfe;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ccdeff;
    color: #4e8dff;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .things_type {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #e4fff7;
    border-radius: 8px 8px 0 0;
    border: 1px solid #aef3df;
    color: #28b28b;
    padding: 0 20px;
    box-sizing: border-box;
  }

  ::v-deep .el-tabs__item.is-active {
    .work_type + .el-icon-close {
      color: #4e8dff !important;
    }

    .things_type + .el-icon-close {
      color: #28b28b !important;
    }

    .work_type {
      background: #ffffff !important;
    }

    .things_type {
      background: #ffffff !important;
    }
  }

  .work_ipt_type ::v-deep .el-input__inner {
    background: transparent;
  }

  .work_ipt_type ::v-deep .el-input__inner:focus {
    border-color: #ccdeff !important;
  }

  .things_ipt_type ::v-deep .el-input__inner {
    background: transparent;
  }

  .things_ipt_type ::v-deep .el-input__inner:focus {
    border-color: #aef3df !important;
  }

  ::v-deep .el-tabs__active-bar {
    display: none;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 1px;
  }

  ::v-deep .el-tabs__item {
    padding: 0;
    margin-right: 4px;
  }

  //内容  样式end>>>>>>>>>>>>>>>>>>>>>
}

.empty {
  margin-top: 100px;
}
</style>
